<template>
  <el-container>
    <el-main class="rightMain">
      <bs-main>
        <device-warn-condition
          slot="header"
          :query-data="queryData"
          @search="search"
          @refresh="doRefreshList"
        ></device-warn-condition>
        <!-- <device-warn-list
          :list-data="tableData"
          :col-data="colData"
          :init-cols-props.sync="initColsProps"
        >
        </device-warn-list> -->

        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :table-tag="tableName"
          :init-headmune-flag="initHeadmuneFlag"
          :list-data="tableData"
          :has-select="true"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :action-opts="actionOpts"
          @sort="handleSort"
          @detailClick="handleDetailClick"
          @init-table="initTable"
        >
          <template slot="actionSlot" slot-scope="{ row }">
            <el-button
              class="detail-button"
              type="primary"
              size="mini"
              @click.native="handleDetailClick(row)"
              >{{ $t('查看') }}</el-button
            >
          </template>
        </list>

        <pagination
          slot="footer"
          :total="pageData.total"
          :page="pageData.page"
          :limit="pageData.limit"
          :page-sizes="pageData.pageSizes"
        ></pagination>
        <device-status-info-dialog
          @refresh="refresh"
        ></device-status-info-dialog>
      </bs-main>
    </el-main>
  </el-container>
</template>

<script>
import DeviceWarnCondition from './components/DeviceWarnCondition'
import DeviceStatusInfoDialog from './components/DeviceStatusInfoDialog'
import Pagination from '@/components/Pagination'
import DeviceMonitorApi from '@/api/device'
import List from '@/components/List'

export default {
  data() {
    const headerContextMenus = {
      width: '120px',
      items: ['sortUp', 'sortDown', 'line', 'cols'],
    }
    return {
      selectTerminalId: '',
      pageData: {
        page: 1,
        total: 0,
        limit: 15,
      },
      queryData: { queryType: 0 ,orderParam:'DESC',orderType: 4},
      // asc: true,
      sortKey: {
        name: 1,
        macText: 2,
        ruleName: 3,
        lastHeartTime: 4,
      },
      actionOpts: {
        name: '当前状态',
        show: true,
        align: 'center',
        minwidth: '50px',
        hidEditBtn: true,
        hidDelBtn: true,
        slot: true,
      },

      tableData: [],
      colData: [
        { label: '终端名称', prop: 'name', width: 120, headerContextMenus },
        {
          label: 'MAC地址',
          prop: 'macText',
          headerContextMenus,
          minwidth: 150,
        },
        {
          label: '预警规则',
          prop: 'ruleName',
          headerContextMenus,
          minwidth: 120,
        },
        { label: '预警内容', prop: 'warnContent', minwidth: 200 },
        {
          label: '时间',
          prop: 'lastHeartTime',
          headerContextMenus,
          minwidth: 150,
        },
      ],
      initColsProps: [
        'name',
        'macText',
        'ruleName',
        'warnContent',
        'lastHeartTime',
      ],

      tableName: 'deviceWarnTable',
      initHeadmuneFlag: false,
      noticeFilter:true,
    }
  },
  computed: {
    // searchItemData() {
    //   let searchItemArr = this.colData
    //     .filter((item) => {
    //       // 根据列有无还能变动
    //       // return item.ischoice && this.initColsProps.indexOf(item.prop) > -1
    //       //完全不变动的下拉
    //       return item.ischoice
    //     })
    //     .map((item) => {
    //       return {
    //         value: item.prop,
    //         name: item.label,
    //       }
    //     })
    //   searchItemArr.unshift({name: '全部选项', value:'all'})
    //   return searchItemArr
    // },
    deviceid() {
      return this.$route.query.deviceid
    },
  },
  watch: {
    deviceid(val) {
      this.doFilterList(val)
    },
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  methods: {
    initTable(config) {
      this.initHeadmuneFlag = true //更改值  触发表头数据重绘
    },
    doRefreshList() {
      this.noticeFilter = false
      this.doList({ current: 1 })
      this.$message.success('刷新成功')
    },
    doList(current) {
      if (current) {
        this.pageData = {
          ...this.pageData,
          ...current,
        }
      }
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      var newQueryData = { ...queryData }
      console.log('noticeFilter----',this.noticeFilter)
      if (this.noticeFilter&&this.deviceid && this.deviceid > 0) {
        newQueryData.queryType = 5
        newQueryData.queryParam = this.deviceid
        this.noticeFilter = false
      }
      this.$store
        .dispatch('device/doWarnTerminalList', newQueryData)
        .then((res) => {
          this.tableData = res.records ? res.records : []
          this.tableData.forEach((element) => {
            element.warnContent = '当前'
            if (element.cpuLoad < element.cpuLoadStatus) {
              element.warnContent += 'CPU已达到' + element.cpuLoadStatus + '%,'
            }
            if (element.memLoad < element.memLoadStatus) {
              element.warnContent +=
                '内存负载已达到' + element.memLoadStatus + '%,'
            }
            if (element.temperature < element.temperatureStatus) {
              element.warnContent +=
                '温度已达到' + element.temperatureStatus + '℃,'
            }
            element.warnContent += '超出指标'
          })
          this.pageData.total = Number(res.total ? res.total : 0)
        })
    },
    doFilterList(deviceid) {
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      var newQueryData = { ...queryData }
      newQueryData.queryType = 5
      newQueryData.queryParam = deviceid
      this.$store
        .dispatch('device/doWarnTerminalList', newQueryData)
        .then((res) => {
          this.tableData = res.records ? res.records : []
          this.tableData.forEach((element) => {
            element.warnContent = '当前'
            if (element.cpuLoad < element.cpuLoadStatus) {
              element.warnContent += 'CPU已达到' + element.cpuLoadStatus + '%,'
            }
            if (element.memLoad < element.memLoadStatus) {
              element.warnContent +=
                '内存负载已达到' + element.memLoadStatus + '%,'
            }
            if (element.temperature < element.temperatureStatus) {
              element.warnContent +=
                '温度已达到' + element.temperatureStatus + '℃,'
            }
            element.warnContent += '超出指标'
          })
          this.pageData.total = Number(res.total ? res.total : 0)
        })
    },

    search() {
      this.doList()
    },

    // 排序
    handleSort(sortInfo) {
      console.log('sortInfo----', sortInfo)
      this.queryData.orderParam = sortInfo.type
      this.queryData.orderType = this.sortKey[sortInfo.prop]
      this.doList()
    },

    async handleDetailClick(row) {
      this.selectTerminalId = row.terminalId
      const res = await DeviceMonitorApi.getDeviceMonitorBy({
        terminalId: row.terminalId,
      })
      this.$eventBus.$emit('showDeviceStatusDialog', res)
    },

    async refresh() {
      const res = await DeviceMonitorApi.getDeviceMonitorBy({
        terminalId: this.selectTerminalId,
      })
      this.$eventBus.$emit('showDeviceStatusDialog', res)
      this.$message({
          message: '刷新成功',
          type: 'success'
        })
    },
  },
  components: {
    DeviceWarnCondition,
    DeviceStatusInfoDialog,
    List,
    Pagination,
  },
}
</script>
